<template>
    <div class="container">
      <!-- 头部 -->
      <div class="header">
        <el-select v-model="selectedOption" placeholder="请选择">
          <el-option label="选项1" value="option1"></el-option>
          <el-option label="选项2" value="option2"></el-option>
          <!-- 其他选项 -->
        </el-select>
        <el-button @click="handleButtonClick" type="primary">按钮</el-button>
        <div class="user-info">
          <!-- 个人信息展示 -->
          <span>{{ userInfo.name }}</span>
          <span>{{ userInfo.role }}</span>
        </div>
      </div>
  
      <!-- 主体内容 -->
      <div class="main-content">
        <!-- 左侧侧边栏 -->
        <div class="sidebar">
          <el-menu :default-active="defaultActive" @select="handleMenuSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="item1">列表项1</el-menu-item>
            <el-menu-item index="item2">列表项2</el-menu-item>
            <!-- 其他列表项 -->
          </el-menu>
        </div>
  
        <!-- 右侧聊天框 -->
        <div class="chat-box">
          <!-- 聊天内容显示区域 -->
          <div class="chat-content">
            <!-- 聊天内容展示 -->
            <div v-for="message in chatMessages" :key="message.id" class="message">
              <span :class="{ 'user-message': message.isUser }">{{ message.content }}</span>
            </div>
          </div>
  
          <!-- 聊天输入框 -->
          <div class="chat-input">
            <el-input v-model="newMessage" placeholder="请输入消息"></el-input>
            <el-button @click="sendMessage" type="primary">发送</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name:"exp",
    data() {
      return {
        selectedOption: '', // 头部选择器的值
        userInfo: {
          name: 'John Doe',
          role: 'Developer'
        },
        defaultActive: 'item1', // 侧边栏默认选中项
        chatMessages: [], // 聊天消息
        newMessage: '' // 输入的新消息
      };
    },
    methods: {
      handleButtonClick() {
        // 头部按钮点击事件处理
        console.log('按钮被点击');
      },
      handleMenuSelect(index) {
        // 侧边栏菜单选中事件处理
        console.log('选中了菜单项: ', index);
      },
      sendMessage() {
        // 发送消息事件处理
        if (this.newMessage.trim() !== '') {
          this.chatMessages.push({
            id: Date.now(),
            content: this.newMessage,
            isUser: true // 假设用户发送的消息
          });
          this.newMessage = '';
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 90vh;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #409eff;
    color: #fff;
  }
  
  .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .main-content {
    display: flex;
    flex: 1;
  }
  
  .sidebar {
    width: 200px;
    background-color: #606266;
  }
  
  .chat-box {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .chat-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }
  
  .message {
    margin-bottom: 8px;
    word-wrap: break-word;
  }
  
  .user-message {
    color: #409eff;
  }
  
  .chat-input {
    display: flex;
    align-items: center;
    padding: 16px;
  }
  </style>